<template>
  <div>
    <h4>服务评价</h4>
    <el-list v-if="reviews.length">
      <el-list-item v-for="r in reviews" :key="r.id">
        <el-list-item-meta
          :title="r.userName"
          :description="r.content"
        />
        <span>{{ r.createTime }}</span>
      </el-list-item>
    </el-list>
    <el-empty v-else description="暂无评价"/>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineExpose } from 'vue'
import { getReviewList } from '@/api/review'
const props = defineProps(['serviceId'])
const reviews = ref([])

async function fetchReviews() {
  const res = await getReviewList({ serviceId: props.serviceId })
  reviews.value = res.data
}
onMounted(fetchReviews)
watch(() => props.serviceId, fetchReviews)
defineExpose({ fetchReviews })
</script> 